<template>
	<view class="body">
		<Title></Title>
		<view class="remen">
			<view class="item_title">用户</view>
			<view class="item" v-for="i in data" :key="i.user_id._id">
				<view class="image——item">
					<image :src="i.user_id.image" mode=""></image>
					<view class="user_data">
						<view class="">
							{{ i.user_id.name }}
						</view>
						<view class="">一共发布{{ i.user_id.my_video.length }}条视频</view>
					</view>
				</view>
				<button>+关注</button>
			</view>
		</view>
		<view class="duanshipin">
			<view class="item_title">短视频</view>
			<view class="duanshipin_item" v-for="i in data">
				<video :src="i.src"></video>
				<view style="padding-left: 0.5rem">
					<view class="font">
						<image :src="i.user_id.image" mode=""></image>
						{{ i.user_id.name }}
					</view>
					<view class="font-content">
						{{ i.video_desc }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Title from '../Component/search_title.vue';
let data = JSON.parse(sessionStorage.getItem('video'));
</script>

<style scoped lang="scss">
.body {
	width: 100vw;
	height: 100vh;
	background-color: black;
}

.remen {
	width: 100vw;
	max-height: 30vh;
	overflow: scroll;
	.item_title {
		padding: 10px;
		color: white;
		font-size: 20px;
		font-weight: 700;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.item {
		display: flex;
		justify-content: space-between;
		color: white;
		padding: 10px;
		margin: 7px;
		button {
			margin: 0;
			background-color: yellow;
			border-radius: 10px;
		}
		.image——item {
			display: flex;
		}
		.user_data {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 10px;
		}
		image {
			width: 50px;
			height: 50px;
			border-radius: 50%;
		}
	}
}
.duanshipin {
	width: 100vw;
	.item_title {
		padding: 10px;
		color: white;
		font-size: 20px;
		font-weight: 700;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.duanshipin_item {
		display: flex;
		flex-direction: column;
		justify-content: center;

		width: 50%;
		background-color: rgb(24, 30, 39);
		margin: 0.2rem;
		video {
			width: 100%;
		}
	}
}
.font {
	color: white;
	display: flex;

	margin-top: 0.5rem;
	image {
		width: 30px;
		height: 30px;
		border-radius: 50%;
	}
}
.font-content {
	color: white;
}
</style>
